<script setup>
import { ref } from 'vue';
// 返回
const onClickLeft = () => history.back();
// 选项卡
const num = ref('2')
// 搜索框
const value = ref('');
const onSearch = (val) => {
    showToast(val)
};
// 搜索
const onClickButton = () => {
    console.log(123);
}
</script>
<template>
    <div class="article">
        <!-- 导航 -->
        <van-nav-bar background="#fff" title="文章资讯" left-arrow @click-left="onClickLeft" />
        <!-- 主题 -->
        <div class="theme">
            <!-- 选项卡 -->
            <div class="navBox_title_but">
                <div :class="num == 1 ? 'active' : 'but'" @click="num = 1">全部</div>
                <div :class="num == 2 ? 'active' : 'but'" @click="num = 2">情侣</div>
                <div :class="num == 3 ? 'active' : 'but'" @click="num = 3">送礼</div>
                <div :class="num == 4 ? 'active' : 'but'" @click="num = 4">鲜花</div>
            </div>
            <!-- 根据num显示不同的页面 -->
            <div class="num1" v-show="num == 1">全部</div>
            <div class="num2" v-show="num == 2">
                <!-- 搜索框 -->
                <van-search background="#f6f6f6" v-model="value" shape="round" show-action placeholder="请输入花材名称，如玫瑰"
                    @search="onSearch">
                    <template #action>
                        <div @click="onClickButton">搜索</div>
                    </template>
                </van-search>
                <div class="content" v-for="item in 5">
                    <router-link to="/details">
                        <div class="content-one">向日葵的花语</div>
                        <div class="content-two">
                            向日葵的花语是忠诚、沉默的爱。因为向日葵是太阳虔诚的追随者，每天随着太阳运行的方向转动，把自己一生所有的热爱都献给了太阳，但是又从来都不会说出口，所以向日葵...</div>
                        <div class="content-three">向日葵的花语</div>
                    </router-link>
                </div>
            </div>
            <div class="num3" v-show="num == 3">送礼</div>
            <div class="num4" v-show="num == 4">鲜花</div>
        </div>

    </div>
</template>

<style lang="scss">
.article {

    /*导航 */
    .van-nav-bar__content {
        position: relative;
        height: 100px;
        background-color: #f84c55;

        /* 透明度为50% */
        .van-badge__wrapper {
            font-size: 18px;
            top: 20px;
            position: absolute;
            color: #fff;
        }

        .van-nav-bar__title {
            font-size: 18px;
            left: 41%;
            top: 20px;
            position: absolute;
            color: #fff;
        }
    }

    /*主题 */
    .theme {
        width: 100%;
        position: absolute;
        z-index: 1000;
        padding-top: 10px;
        box-sizing: border-box;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-top: -30px;

        background-color: #f6f6f6;

        /*选项卡 */
        .navBox_title_but {
            width: 96%;
            margin: auto;
            border-radius: 50px;
            box-sizing: border-box;
            overflow: hidden;
            display: flex;
            justify-content: left;

            .but {
                margin-left: 5px;
                border-radius: 20px;
                width: 20%;
                text-align: center;
                color: #b4b4b4;
                background-color: #fff;
                padding: 5px 10px;
                box-sizing: border-box;
            }

            .active {
                width: 20%;
                margin-left: 5px;
                text-align: center;
                border-radius: 20px;
                color: #f96e75;
                border: 1px solid #f96e75;
                background-color: #f6cad7;
                line-height: 30px;
                box-sizing: border-box;
            }
        }

        .num2 {

            /*搜索框 */
            .van-search {
                width: 90%;
                --van-search-input-height: 40px;
                --van-search-content-background: #fff;
                box-sizing: border-box;

                .van-search__action {
                    right: 10px;
                    position: absolute;
                    text-align: center;
                    width: 15%;
                    color: #fff;
                    background-color: #f96e75;
                    border-top-right-radius: 20px;
                    border-bottom-right-radius: 20px;
                }
            }

            .content {
                width: 90%;
                margin: auto;
                margin-top: 10px;
                background-color: #fff;
                border-radius: 15px;
                padding: 8px;
                box-shadow: 5px 5px 5px #e0e0e0;

                .content-one {
                    color: #000;
                    font-size: 18px;
                    font-weight: bold;
                }

                .content-two {
                    color: #8e8e8e;
                }

                .content-three {
                    color: #a0a0a0;
                }
            }
        }
    }
}
</style>
